<template>
  <div class="mainApp">
    <a-config-provider :locale="zhCN">
      <a-layout class="i-layout-top">
        <a-layout-header class="i-layout-header">
          <div class="logo">
            <img src="@/assets/logo.png">
          </div>
          <div class="action" :style="collapsed ? 'margin-left:42px' : ''">
            <span>欢迎使用凡兔管理后台</span>
          </div>
          <div class="avatar">
            <div class="profile">
              <a-avatar
                :src="userInfo.avatar ? userInfo.avatar : 'http://oss-cdn.mkh.cn/picture/2022-4-22/2QxGdnkVSOPp0qC4M5Slj.png'" />
              <span class="name">{{ userInfo.name }}</span>
              <div class="user-menu">
                <div class="user-menu-item flex flex-align-center" @click="pwdPopupShowChange">
                  <i class="iconfont icon-icon_xiugaimima"></i>
                  <span>修改密码</span>
                </div>
              </div>
            </div>
            <a-popconfirm class="exit" placement="bottomRight" ok-text="确认" cancel-text="取消" @confirm="logout">
              <template #title>
                <p>你确认要退出吗？</p>
              </template>
              <a-button class="exit--action">
                <poweroff-outlined />
                退出
              </a-button>
            </a-popconfirm>
          </div>
        </a-layout-header>
      </a-layout>
      <a-layout class="i-layout">
        <a-layout-sider v-model:collapsed="collapsed" collapsible :trigger="null">
          <a-menu :selectedKeys="selectedKeys" theme="light" mode="inline" :openKeys="openKeys"
            @openChange="onOpenChange">
            <menu-tree :list="menuData"></menu-tree>
          </a-menu>
          <div class="menu-show-btn flex flex-align-center" @click="collapsed = !collapsed">
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
          </div>
        </a-layout-sider>
        <div class="content">
          <a-layout-content class="content-nav">
            <tabsCheck @setCachedViews="getCachedViews" class="tabsCheck" ref="tabsView" />
            <div class="container">
              <router-view v-slot="{ Component }">
                <keep-alive :include="cachedViewNames">
                  <component :is="Component"></component>
                </keep-alive>
              </router-view>
            </div>
          </a-layout-content>
        </div>
      </a-layout>
    </a-config-provider>
  </div>

  <upload-pwd-popup v-if="pwdPopupShow" @close="pwdPopupShowChange"></upload-pwd-popup>
</template>

<script setup>
import menuTree from "@/components/menu-tree/index.vue";
import uploadPwdPopup from "@/components/upload-pwd/index.vue";
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import zhCN from "ant-design-vue/lib/locale/zh_CN";
import tabsCheck from "@/components/tabs/index.vue";
import { useRouter, useRoute } from "vue-router";
import useMenuSelected from "@/composables/useMenuSelected";

const router = useRouter();
const route = useRoute();

let userInfo = ref({});
let pwdPopupShow = ref(false);

let cachedViews = ref([]);
let cachedViewNames = ref([]);
const menuData = ref([
  {
    id: 1,
    label: '用户管理',
    icon: 'icon-yonghu',
    path: '/userAdmin'
  },
  {
    id: 2,
    label: '红人管理',
    icon: 'icon-hongren',
    path: '/sensationAdmin'
  },
  {
    id: 3,
    label: '权益管理',
    icon: 'icon-huiyuan',
    path: '/memberAdmin'
  }
]);
let selectedKeys = ref([1]);
let openKeys = ref([]);
const rootSubmenuKeys = ref([]);

// 显示或隐藏密码框
const pwdPopupShowChange = () => {
  pwdPopupShow.value = !pwdPopupShow.value;
};
// 切换标签页
const getCachedViews = tabViews => {
  let cachedViewNames1 = [];
  tabViews.forEach(m => {
    cachedViewNames1.push(m.name);
  });
  setTimeout(() => {
    cachedViews.value = tabViews;
    cachedViewNames.value = cachedViewNames1;
  }, 1000);
};
// 菜单栏最外级只能打开一个
const onOpenChange = openKey => {
  const latestOpenKey = openKey.find(
    key => openKeys.value.indexOf(key) === -1
  );
  if (rootSubmenuKeys.value.indexOf(latestOpenKey) === -1) {
    openKeys.value = openKey;
  } else {
    openKeys.value = latestOpenKey ? [latestOpenKey] : [];
  }
};
// 获取用户信息
const getUserInfo = () => {
  // base.getUserInfo().then(res => {
  //   userInfo.value = res;
  //   let btns = {};
  //   res.permissions.forEach(item => {
  //     btns[item] = true;
  //   });
  //   localStorage.setItem("btns-admin", JSON.stringify(btns));
  // });
};
// 获取菜单栏
const getMenu = getCurrent => {
  // base
  //   .getMenu()
  //   .then(res => {
  //     menuData.value = res;
  //     const obj = useMenuSelected(res, undefined);
  //     selectedKeys.value = obj.selectedKeys.value;
  //     openKeys.value = obj.openKeys.value;
  //     rootSubmenuKeys.value = obj.rootSubmenuKeys;
  //   })
  //   .catch(() => {
  //     if (!router.currentRoute.value.query.ticket) {
  //       getCurrent.ctx.$refs.tabsView.clearAll();
  //     }
  //   });
};
// 退出登录
const logout = () => {
  localStorage.clear();
  router.push('/login');
}

onMounted(() => {
  getUserInfo();
  getMenu(getCurrentInstance());
});
watch(() => route, to => {
  selectedKeys.value = useMenuSelected(
    menuData.value,
    to.meta.parentPath
  ).selectedKeys.value;
  openKeys.value = useMenuSelected(
    menuData.value,
    to.meta.parentPath
  ).openKeys.value;
  let obj;
  let newCachedViewNames = [];
  cachedViews.value.forEach(item => {
    if (item.name === to.name) {
      obj = item;
    } else {
      newCachedViewNames.push(item.name);
    }
  });
  if (
    obj?.query &&
    (obj.query.id != to.query.id)
  ) {
    cachedViewNames.value = newCachedViewNames;
  }
}, { immediate: true, deep: true });
</script>

<style lang="less">
.mainApp {
  .logo {
    img {
      height: 36px;
    }
  }

  .ant-layout-header {
    background: #4096ff !important;
    padding-inline-start: 10px !important;
  }

  .ant-layout-sider {
    background: #fff !important;
  }

  .ant-layout {
    &.i-layout-top {
      flex: 0 0 auto;

      .i-layout-header {
        display: flex;
        font-size: 16px;
        color: #fff;

        .action {
          display: flex;
          flex: 1;
          margin-left: 114px;
          justify-content: space-between;

          .icon-item {
            margin-left: 28px;
          }

          span {
            font-weight: bold;
          }
        }

        .avatar {
          margin-left: 50px;
          display: flex;
          align-items: center;
          font-size: 14px;

          .profile {
            margin-right: 26px;
            position: relative;

            .ant-avatar {
              border-radius: 50%;
              position: relative;
              width: 26px;
              height: 26px;
              overflow: hidden;

              &::before {
                content: "...";
                display: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 26px;
                height: 26px;
                z-index: 10;
                border-radius: 50%;
                text-align: center;
                line-height: 18px;
                background: rgba(0, 0, 0, 0.45);
                color: #fff;
                font-size: 20px;
              }

              img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                border: 1px solid rgba(255, 255, 255, 0.4);
              }
            }

            &:hover {
              .user-menu {
                display: block !important;
              }

              .ant-avatar {
                border-radius: 50%;
                overflow: hidden;
                position: relative;

                &::before {
                  display: block !important;
                }
              }
            }

            .name {
              margin-left: 5px;
            }

            .user-menu {
              position: absolute;
              left: 0;
              top: 44px;
              z-index: 10;
              width: 160px;
              background: #fff;
              box-shadow: 0px 4px 20px -4px rgba(0, 0, 0, 0.3);
              display: none;
              padding: 5px 0;

              .user-menu-item {
                padding: 0 16px;
                height: 56px;
                cursor: pointer;

                &:hover {
                  background: #4096ff;

                  i,
                  span {
                    color: #fff;
                  }
                }

                i {
                  color: #325b88;
                  margin-right: 8px;
                }

                span {
                  font-size: 14px;
                  color: #325b88;
                }
              }
            }
          }

          .exit {
            display: flex;
            align-items: center;
            font-size: 12px;
            cursor: pointer;
            background: none;
            border: none;
            color: #fff;

            &--action {
              margin-left: 4px;
            }

            .anticon-poweroff {
              position: relative;
              top: 1px;
            }
          }
        }
      }
    }
  }
}
</style>
